<template>
  <view>
    <uni-search-bar @focus="toSearch"></uni-search-bar>
    <!-- 轮播 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(v, i) in banners" :key="i">
        <view class="swiper-item">
          <image :src="v" mode="widthFix" class="banner"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 导航菜单 -->
    <view class="menu">
      <view class="menu-item" v-for="(v, i) in menus" :key="i" @click="handleClick(v)">
        <image :src="v.image" mode=""></image>
        <text>{{ v.name }}</text>
      </view>
    </view>
    <!-- tab切换 -->
    <view class="tabs">
      <scroll-view scroll-x class="tab-title">
        <view class="title" :class="i === tabIndex ? 'active': ''" @click="tabIndex = i" v-for="(v, i) in tabs"
          :key="i">{{ v.title }}</view>
      </scroll-view>
      <view class="tab-content">
        <list-item v-for="(v, i) in list" :key="i" :v="v"></list-item>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.getBanners()
      this.getMenus()
      this.getTabs()
    },
    data() {
      return {
        banners: [],
        menus: [],
        tabs: [],
        tabIndex: 0,
      };
    },
    computed: {
      list() {
        if (this.tabs.length === 0) return []
        return this.tabs[this.tabIndex].children
      }
    },
    methods: {
      toSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      },
      handleClick(v) {
        if (v.name === '更多') {
          uni.navigateTo({
            url: '/pages/project/project'
          })
        }
      },
      async getBanners() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/banners'
        });
        if (error) {
          console.log('数据请求出错')
          return
        }
        this.banners = resp.data
      },
      async getMenus() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/menus'
        });
        if (error) {
          console.log('数据请求出错')
          return
        }
        this.menus = resp.data
      },
      async getTabs() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/tabs'
        });
        if (error) {
          console.log('数据请求出错')
          return
        }
        this.tabs = resp.data
      }
    }
  }
</script>

<style lang="scss">
  .swiper {
    width: 100%;
    height: 200px;

    .banner {
      height: 200px;
      width: 100%;
    }
  }

  .menu {
    display: flex;
    flex-wrap: wrap;

    .menu-item {
      width: 20%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 100px;

      image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
  }

  .tab-title {
    white-space: nowrap;

    .title {
      display: inline-block;
      margin: 10px;

      &.active {
        color: red;
        font-weight: bold;
      }
    }
  }

  .tab-content {
    display: flex;
    flex-wrap: wrap;

  }
</style>
